<template>
  <div class="user-manage-page">
    <!-- 固定的筛选区域 -->
    <div class="filter-fixed">
      <!-- 查询区域 -->
      <a-card class="filter-card" :bordered="false">
        <a-form layout="inline">
          <!-- 用户名搜索 -->
          <a-form-item label="用户名">
            <a-input
              v-model:value="queryParams.userName"
              placeholder="请输入用户名"
              allowClear
              style="width: 170px"
            />
          </a-form-item>

          <div class="filter-divider" />

          <!-- 其他筛选条件 -->
          <a-form-item label="账号">
            <a-input
              v-model:value="queryParams.userAccount"
              placeholder="请输入账号"
              allowClear
              style="width: 170px"
            />
          </a-form-item>

          <a-form-item label="账号状态">
            <a-select
              v-model:value="queryParams.isForbid"
              style="width: 140px"
              placeholder="请选择状态"
              allowClear
            >
              <a-select-option :value="1">禁用</a-select-option>
              <a-select-option :value="0">正常</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="在线状态">
            <a-select
              v-model:value="queryParams.loginStatus"
              style="width: 140px"
              placeholder="请选择状态"
              allowClear
            >
              <a-select-option :value="1">在线</a-select-option>
              <a-select-option :value="0">离线</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item>
            <a-space>
              <a-button type="primary" @click="handleSearch">
                <template #icon><SearchOutlined /></template>
                查询
              </a-button>
              <a-button @click="handleReset">
                <template #icon><ReloadOutlined /></template>
                重置
              </a-button>
              <!-- 新增：导出Excel按钮 -->
              <a-button type="primary" @click="showExportModal = true">
                <template #icon><DownloadOutlined /></template>
                导出Excel
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </a-card>
    </div>

    <!-- 表格内容区域 -->
    <div class="table-content">
      <!-- 表格区域 -->
      <a-card class="table-card">
        <a-table
          :columns="columns"
          :data-source="userList"
          :loading="loading"
          :pagination="{
            total: total,
            current: queryParams.pageNo,
            pageSize: queryParams.pageSize,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total: number) => `共 ${total} 条记录`,
          }"
          @change="handleTableChange"
          bordered
          rowKey="id"
        >
          <!-- 用户头像 -->
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'userAvatar'">
              <a-avatar
                :src="
                  record.userAvatar
                    ? userAvatarPrefix + record.userAvatar
                    : '/src/assets/default_avatar.png'
                "
                :alt="record.userName"
              />
            </template>

            <!-- 用户角色 -->
            <template v-else-if="column.dataIndex === 'userRole'">
              <a-tag :color="record.userRole === 'admin' ? 'blue' : 'default'">
                {{ record.userRole === 'admin' ? '管理员' : '用户' }}
              </a-tag>
            </template>

            <!-- 用户状态 -->
            <template v-else-if="column.dataIndex === 'isForbid'">
              <a-tag :color="record.isForbid ? 'red' : 'green'">
                {{ record.isForbid ? '已封禁' : '正常' }}
              </a-tag>
            </template>

            <!-- 在线状态 -->
            <template v-else-if="column.dataIndex === 'loginStatus'">
              <a-badge
                :status="record.loginStatus ? 'success' : 'default'"
                :text="record.loginStatus ? '在线' : '离线'"
              />
            </template>

            <!-- 创建时间 -->
            <template v-else-if="column.dataIndex === 'createTime'">
              {{ formatDate(record.createTime) }}
            </template>

            <!-- 操作按钮 -->
            <template v-else-if="column.dataIndex === 'operation'">
              <div class="operation-btns">
                <a-tooltip :title="record.isForbid ? '解除封禁' : '封禁用户'">
                  <a-button type="link" :danger="!record.isForbid" @click="handleToggleBan(record)">
                    <template #icon>
                      <StopOutlined v-if="!record.isForbid" />
                      <CheckOutlined v-else />
                    </template>
                  </a-button>
                </a-tooltip>
              </div>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>

    <!-- 新增：导出Excel弹窗 -->
    <a-modal
      v-model:visible="showExportModal"
      title="导出Excel"
      :footer="null"
      centered
      destroyOnClose
    >
      <a-form layout="vertical">
        <a-form-item label="导出账号状态">
          <a-select
            v-model:value="exportStatus"
            style="width: 100%"
            placeholder="请选择账号状态"
            allowClear
          >
            <a-select-option :value="1">禁用</a-select-option>
            <a-select-option :value="0">正常</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="注册月份">
          <a-date-picker
            v-model:value="exportMonth"
            picker="month"
            allowClear
            style="width: 100%"
            placeholder="请选择月份"
            :locale="datePickerLocale"
            format="YYYY年MM月"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" block @click="handleExportModal"> 确认导出 </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue'
  import { message, Modal } from 'ant-design-vue'
  import {
    SearchOutlined,
    ReloadOutlined,
    StopOutlined,
    CheckOutlined,
    DownloadOutlined,
  } from '@ant-design/icons-vue'
  import dayjs from 'dayjs'
  import 'dayjs/locale/zh-cn'
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
  dayjs.locale('zh-cn')
  import { listUsingPost1, disableUser } from '@/api/guanliyuanmokuaijiekou'

  // 头像前缀
  const userAvatarPrefix = 'https://fy-space-1333414113.cos.ap-beijing.myqcloud.com'

  // 表格列定义
  const columns = [
    {
      title: '头像',
      dataIndex: 'userAvatar',
      width: 80,
      align: 'center',
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      width: '12%',
    },
    {
      title: '账号',
      dataIndex: 'userAccount',
      width: '12%',
    },
    {
      title: '角色',
      dataIndex: 'userRole',
      width: '8%',
      align: 'center',
    },
    {
      title: '账号状态',
      dataIndex: 'isForbid',
      width: '8%',
      align: 'center',
    },
    {
      title: '在线状态',
      dataIndex: 'loginStatus',
      width: '8%',
      align: 'center',
    },
    {
      title: '简介',
      dataIndex: 'userProfile',
      width: '20%',
      ellipsis: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: '12%',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '12%',
      align: 'center',
      fixed: 'right',
    },
  ]

  // 查询参数
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    userName: '',
    userAccount: '',
    isForbid: undefined,
    loginStatus: undefined,
    sortField: 'createTime',
  })

  // 状态定义
  const loading = ref(false)
  const userList = ref([])
  const total = ref(0)

  // 新增：注册月份选择器
  const showExportModal = ref(false)
  const exportMonth = ref(null)
  const exportStatus = ref(null)

  // 获取用户列表
  const fetchUserList = async () => {
    loading.value = true
    try {
      const res = await listUsingPost1(queryParams)
      if (res.data.code === 200) {
        // 确保数据存在且是数组
        const data = res.data.data?.data || []
        // 确保每个用户的ID都是字符串类型
        const processedData = data.map((user: any) => ({
          ...user,
          id: String(user.id) // 确保ID是字符串类型
        }))
        userList.value = processedData
        total.value = processedData.length
      } else {
        message.error(res.data.message || '获取用户列表失败')
      }
    } catch (error: any ) {
      message.error('获取用户列表失败：' + error.message)
    } finally {
      loading.value = false
    }
  }

  // 搜索
  const handleSearch = () => {
    queryParams.pageNo = 1
    fetchUserList()
  }

  // 重置
  const handleReset = () => {
    queryParams.userName = ''
    queryParams.userAccount = ''
    queryParams.isForbid = undefined
    queryParams.loginStatus = undefined
    queryParams.pageNo = 1
    fetchUserList()
  }

  // 表格变化处理
  const handleTableChange = (pagination: any) => {
    queryParams.pageNo = pagination.current
    queryParams.pageSize = pagination.pageSize
    fetchUserList()
  }

  // 格式化日期
  const formatDate = (date: string) => {
    return dayjs(date).format('YYYY-MM-DD HH:mm')
  }

  // 封禁/解封用户
  const handleToggleBan = async (record: any) => {
    try {
      const newStatus = record.isForbid ? 0 : 1 // 如果当前是封禁状态，则解封；否则封禁
      const actionText = record.isForbid ? '解封' : '封禁'
      
      // 添加确认对话框
      Modal.confirm({
        title: `确认${actionText}用户`,
        content: `确定要${actionText}用户 "${record.userName}" 吗？`,
        okText: '确定',
        cancelText: '取消',

        onOk: async () => {
          try {
            // 确保ID是字符串类型
            const userId = String(record.id)
            const res = await disableUser(userId, newStatus)
            
            if (res.data.code === 200) {
              message.success(`${actionText}成功`)
              // 更新本地数据
              record.isForbid = newStatus
              // 重新获取用户列表
              fetchUserList()
            } else {
              message.error(res.data.message || `${actionText}失败`)
            }
          } catch (error: any) {
            message.error(`${actionText}失败：${error.message}`)
          }
        },
      })
      return
    } catch (error: any) {
      message.error(`${record.isForbid ? '解封' : '封禁'}失败：${error.message}`)
    }
  }

  // 新增：导出Excel方法
  const handleExportModal = () => {
    // 导出账号状态参数
    const status = exportStatus.value !== undefined ? exportStatus.value : null
    // 注册月份参数
    const month = exportMonth.value ? dayjs(exportMonth.value).format('YYYY-MM') : null
    // 拼接GET请求URL（请根据实际后端接口调整路径）
    const url = `/api/admin/export?isForbid=${status}&month=${month}`
    // 触发下载
    window.open(url)
    showExportModal.value = false
  }

  const datePickerLocale = locale

  onMounted(() => {
    fetchUserList()
  })
</script>

<style scoped>
  .user-manage-page {
    padding: 4px;
    background: var(--theme-background);
    min-height: calc(100vh - 70px); /* 调整为新的头部高度 */
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative; /* 为固定定位提供参考 */
    transition: all 0.3s ease;
  }

  /* 固定的筛选区域 */
  .filter-fixed {
    position: fixed;
    top: 70px; /* 与头部导航栏高度一致 */
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--theme-background);
    padding: 4px 4px 0; /* 增加筛选区域顶部内边距 */
    transition: all 0.3s ease;
  }

  /* 筛选区域卡片 */
  .filter-card {
    background: var(--theme-surface);
    border-radius: 8px;
    margin-bottom: 0;
    transition: all 0.3s ease;
  }

  /* 表格内容区域 */
  .table-content {
    margin-top: 140px; /* 为固定的筛选区域留出空间 */
  }

  /* 页面头部 */
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 页面头部按钮 */
  .header-actions {
    display: flex; /* 页面头部按钮布局 */
    gap: 16px; /* 页面头部按钮间距 */
  }

  /* 表格区域 */
  .table-card {
    background: var(--theme-surface);
    border-radius: 8px;
    margin-top: -27px;
    transition: all 0.3s ease;
  }

  /* 操作按钮 */
  .operation-btns {
    display: flex; /* 操作按钮布局 */
    justify-content: center; /* 操作按钮水平居中 */
    gap: 8px; /* 操作按钮间距 */
  }

  /* 表单项 */
  :deep(.ant-form-item) {
    margin-bottom: 24px; /* 表单项下边距 */
  }

  /* 表格 */
  :deep(.ant-table) {
    margin: -24px; /* 表格外边距 */
    margin-bottom: 0; /* 移除表格底部外边距 */
  }

  /* 卡片体 */
  :deep(.ant-card-body) {
    padding: 16px 24px;
    background: var(--theme-surface);
    border-radius: 8px;
    box-shadow: 0 1px 4px var(--theme-shadow);
    transition: all 0.3s ease;
  }

  /* 表格分页 */
  :deep(.ant-table-pagination) {
    margin: 40px 0 24px; /* 增加与表格的间距(上边距40px)，保持底部间距24px */
    display: flex;
    justify-content: center; /* 分页居中显示 */
  }

  /* 表格单元格 */
  :deep(.ant-table-cell) {
    vertical-align: middle !important; /* 表格单元格垂直居中 */
  }

  /* 筛选表单 */
  .filter-card :deep(.ant-form) {
    display: flex; /* 筛选表单布局 */
    align-items: center; /* 筛选表单垂直居中 */
    flex-wrap: nowrap; /* 筛选表单不换行 */
  }

  /* 筛选分割线 */
  .filter-divider {
    width: 1px; /* 分割线宽度 */
    height: 32px; /* 分割线高度 */
    background: var(--theme-border); /* 分割线背景色 */
    margin: 0 16px; /* 分割线外边距 */
    transition: all 0.3s ease;
  }

  /* 筛选表单项 */
  .filter-card :deep(.ant-form-item) {
    margin-bottom: 24px; /* 筛选表单项下边距 */
    margin-right: 16px; /* 筛选表单项右外边距 */
  }

  /* 最后一个表单项 */
  .filter-card :deep(.ant-form-item:last-child) {
    margin-right: 0; /* 最后一个表单项右外边距 */
    margin-left: auto; /* 最后一个表单项左外边距 */
  }

  :deep(.ant-modal-body) {
    padding: 24px;
    max-height: 600px;
    overflow-y: auto;
  }

  :deep(.ant-form-item-label) {
    min-width: 80px;
  }

  /* 主题适配样式 */
  /* 输入框样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-input) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-input:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-input:focus) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-input::placeholder) {
    color: var(--theme-textSecondary);
  }

  /* 输入框清除按钮样式 */
  :deep(.ant-input-clear-icon) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-input-clear-icon:hover) {
    color: var(--theme-text);
  }

  /* 下拉框样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-select) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-select:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-select-focused) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-select-selector) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-select-selector:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-select-focused .ant-select-selector) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-select-selection-placeholder) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-select-selection-item) {
    color: var(--theme-text);
  }

  :deep(.ant-select-arrow) {
    color: var(--theme-textSecondary);
  }

  /* 下拉选项样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-select-dropdown) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: 0 2px 8px var(--theme-shadow);
  }

  :deep(.ant-select-item) {
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-select-item:hover) {
    background: var(--theme-background);
  }

  :deep(.ant-select-item-option-selected) {
    background: var(--theme-primary);
    color: var(--theme-surface);
  }

  /* 日期选择器样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-picker) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-picker:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-picker-focused) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-picker-input > input) {
    background: var(--theme-surface);
    color: var(--theme-text);
  }

  :deep(.ant-picker-input > input::placeholder) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-picker-separator) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-picker-suffix) {
    color: var(--theme-textSecondary);
  }

  /* 日期选择器面板样式 */
  :deep(.ant-picker-panel) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
  }

  :deep(.ant-picker-panel-container) {
    background: var(--theme-surface);
  }

  :deep(.ant-picker-header) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
  }

  :deep(.ant-picker-header button) {
    color: var(--theme-text);
  }

  :deep(.ant-picker-header button:hover) {
    color: var(--theme-primary);
  }

  :deep(.ant-picker-content th) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-picker-content td) {
    color: var(--theme-text);
  }

  :deep(.ant-picker-content td:hover) {
    background: var(--theme-background);
  }

  :deep(.ant-picker-content td.ant-picker-cell-selected) {
    background: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-picker-content td.ant-picker-cell-today) {
    border-color: var(--theme-primary);
  }

  /* 表格样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-table) {
    background: var(--theme-surface);
    color: var(--theme-text);
  }

  :deep(.ant-table-thead > tr > th) {
    background: var(--theme-background);
    color: var(--theme-text);
    border-bottom: 1px solid var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-table-tbody > tr > td) {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-bottom: 1px solid var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-table-tbody > tr:hover > td) {
    background: var(--theme-background);
  }

  /* 分页样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-pagination) {
    color: var(--theme-text);
  }

  :deep(.ant-pagination-item) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-pagination-item:hover) {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
  }

  :deep(.ant-pagination-item-active) {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-pagination-prev),
  :deep(.ant-pagination-next) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-pagination-prev:hover),
  :deep(.ant-pagination-next:hover) {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
  }

  :deep(.ant-pagination-jump-prev),
  :deep(.ant-pagination-jump-next) {
    color: var(--theme-text);
  }

  :deep(.ant-pagination-options) {
    color: var(--theme-text);
  }

  :deep(.ant-pagination-options .ant-select) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
  }

  :deep(.ant-pagination-options .ant-select:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-pagination-options .ant-select-focused) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-pagination-total-text) {
    color: var(--theme-text);
  }

  /* 表单项标签样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-form-item-label > label) {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  /* 按钮样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-btn) {
    transition: all 0.3s ease;
  }

  :deep(.ant-btn-primary) {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-btn-primary:hover) {
    background: var(--theme-secondary);
    border-color: var(--theme-secondary);
    color: var(--theme-surface);
  }

  :deep(.ant-btn-default) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
  }

  :deep(.ant-btn-default:hover) {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
  }

  :deep(.ant-btn-link) {
    background: transparent;
    border-color: transparent;
    color: var(--theme-primary);
  }

  :deep(.ant-btn-link:hover) {
    background: transparent;
    border-color: transparent;
    color: var(--theme-secondary);
  }

  /* 标签样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-tag) {
    background: var(--theme-background);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-tag:hover) {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
  }

  /* 徽章样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-badge-status-text) {
    color: var(--theme-text);
  }

  /* 头像样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-avatar) {
    background: var(--theme-background);
    border: 1px solid var(--theme-border);
    transition: all 0.3s ease;
  }

  /* 模态框样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-modal-content) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-modal-header) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-modal-title) {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  :deep(.ant-modal-body) {
    background: var(--theme-surface);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-modal-footer) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    transition: all 0.3s ease;
  }

  /* 工具提示样式 - 完全按照个人中心页面的标准实现 */
  :deep(.ant-tooltip-inner) {
    background: var(--theme-surface);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-tooltip-arrow::before) {
    background: var(--theme-surface);
    transition: all 0.3s ease;
  }

  /* 修复浏览器自动填充状态下的样式问题 */
  /* Webkit浏览器 (Chrome, Safari, Edge) */
  :deep(.ant-input:-webkit-autofill),
  :deep(.ant-input:-webkit-autofill:hover),
  :deep(.ant-input:-webkit-autofill:focus),
  :deep(.ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 修复输入框包装器的自动填充样式 */
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill),
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:hover),
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:focus),
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* Firefox浏览器 */
  :deep(.ant-input:-moz-autofill),
  :deep(.ant-input:-moz-autofill:focus) {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    transition: all 0.3s ease !important;
  }

  /* 修复密码输入框的自动填充样式 */
  :deep(.ant-input-password .ant-input:-webkit-autofill),
  :deep(.ant-input-password .ant-input:-webkit-autofill:hover),
  :deep(.ant-input-password .ant-input:-webkit-autofill:focus),
  :deep(.ant-input-password .ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 确保自动填充状态下的输入框样式与主题一致 */
  :deep(.ant-input[data-autofill="true"]),
  :deep(.ant-input[data-autofill="true"]:hover),
  :deep(.ant-input[data-autofill="true"]:focus) {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  /* 修复自动填充状态下的焦点样式 */
  :deep(.ant-input:-webkit-autofill:focus) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    transition: all 0.3s ease !important;
  }

  /* 修复自动填充状态下的悬停样式 */
  :deep(.ant-input:-webkit-autofill:hover) {
    border-color: var(--theme-primary) !important;
    transition: all 0.3s ease !important;
  }

  /* 确保所有输入框在自动填充状态下都使用主题颜色 */
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 修复自动填充状态下的图标颜色 */
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill ~ .anticon) {
    color: var(--theme-textSecondary) !important;
    transition: color 0.3s ease !important;
  }

  /* 修复自动填充状态下的边框样式 */
  :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill)) {
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill):hover) {
    border-color: var(--theme-primary) !important;
    transition: all 0.3s ease !important;
  }

  :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill):focus-within) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    transition: all 0.3s ease !important;
  }

  /* 修复搜索框和筛选框的自动填充样式 */
  .filter-card :deep(.ant-input:-webkit-autofill),
  .filter-card :deep(.ant-input:-webkit-autofill:hover),
  .filter-card :deep(.ant-input:-webkit-autofill:focus),
  .filter-card :deep(.ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 修复搜索框和筛选框的包装器自动填充样式 */
  .filter-card :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill),
  .filter-card :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:hover),
  .filter-card :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:focus),
  .filter-card :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 确保搜索框和筛选框在自动填充状态下边框样式一致 */
  .filter-card :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill)) {
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  .filter-card :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill):hover) {
    border-color: var(--theme-primary) !important;
    transition: all 0.3s ease !important;
  }

  .filter-card :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill):focus-within) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    transition: all 0.3s ease !important;
  }

  /* 强制覆盖所有输入框的背景色，确保没有白色背景 */
  .filter-card :deep(.ant-input),
  .filter-card :deep(.ant-input-affix-wrapper .ant-input) {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  .filter-card :deep(.ant-input:hover),
  .filter-card :deep(.ant-input-affix-wrapper .ant-input:hover) {
    border-color: var(--theme-primary) !important;
    background-color: var(--theme-surface) !important;
    transition: all 0.3s ease !important;
  }

  .filter-card :deep(.ant-input:focus),
  .filter-card :deep(.ant-input-affix-wrapper .ant-input:focus) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    background-color: var(--theme-surface) !important;
    transition: all 0.3s ease !important;
  }

  .filter-card :deep(.ant-input::placeholder) {
    color: var(--theme-textSecondary) !important;
  }

  /* 强制覆盖输入框包装器的背景色 */
  .filter-card :deep(.ant-input-affix-wrapper) {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  .filter-card :deep(.ant-input-affix-wrapper:hover) {
    border-color: var(--theme-primary) !important;
    background-color: var(--theme-surface) !important;
    transition: all 0.3s ease !important;
  }

  .filter-card :deep(.ant-input-affix-wrapper-focused) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    background-color: var(--theme-surface) !important;
    transition: all 0.3s ease !important;
  }

  /* 确保用户名和账号输入框在所有状态下都使用主题背景色 */
  .filter-card :deep(.ant-form-item:has(.ant-input)) .ant-input,
  .filter-card :deep(.ant-form-item:has(.ant-input-affix-wrapper)) .ant-input-affix-wrapper .ant-input {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  /* 强制覆盖所有可能的白色背景 */
  .filter-card :deep(.ant-input),
  .filter-card :deep(.ant-input-affix-wrapper),
  .filter-card :deep(.ant-input-affix-wrapper .ant-input),
  .filter-card :deep(.ant-input-affix-wrapper-focused),
  .filter-card :deep(.ant-input-affix-wrapper-focused .ant-input) {
    background-color: var(--theme-surface) !important;
    background: var(--theme-surface) !important;
    transition: all 0.3s ease !important;
  }

  /* 确保输入框在任何状态下都不会有白色背景 */
  .filter-card :deep(.ant-input[style*="background"]),
  .filter-card :deep(.ant-input-affix-wrapper[style*="background"]) {
    background-color: var(--theme-surface) !important;
    background: var(--theme-surface) !important;
  }

  /* 覆盖可能的行内样式 */
  .filter-card :deep(.ant-input[style*="background-color"]),
  .filter-card :deep(.ant-input-affix-wrapper[style*="background-color"]) {
    background-color: var(--theme-surface) !important;
    background: var(--theme-surface) !important;
  }


</style>
